<template>
    <section class="service_chore_service_chenue">
  		<el-form label-position="left" label-width="120px" :model="form" ref="form1" :rules="rules">
		  <el-form-item label="按频率控制">
		    <el-input placeholder="请输入频率" style="width: 300px;" v-model="form.accessTactics.frequency" class="">
		    <el-select v-model="form.accessTactics.frequencyUnit" style="width: 100px;" slot="append" placeholder="请选择">
		      <el-option label="次/小时" value=1></el-option>
		      <el-option label="次/天" value=2></el-option>
		      <el-option label="次/月" value=3></el-option>
		    </el-select>
		    </el-input>
		  </el-form-item>
		  
		   <el-form-item label="按流量控制">
		    <el-input placeholder="请输入流量" style="width: 300px;" v-model="form.accessTactics.flow" class="">
		    <el-select v-model="form.accessTactics.flowUnit" style="width: 100px;" slot="append" placeholder="请选择">
		      <el-option label="M/小时" value=1></el-option>
		      <el-option label="M/天" value=2></el-option>
		      <el-option label="M/月" value=3></el-option>
		    </el-select>
		    </el-input>
		  </el-form-item>
		  
		  <el-form-item label="访问时间段">
		  		<el-radio-group v-model="form.accessTactics.timeTpye" class="radio_diy" @change="changeTimeArea">
		  			  <el-radio-button label=0>不限</el-radio-button>
				      <el-radio-button label=1>每天</el-radio-button>
				      <el-radio-button label=2>每周</el-radio-button>
				      <el-radio-button label=3>每月</el-radio-button>
				</el-radio-group>
				<div class="" style="margin-top: 15px;">
					<el-time-select
					v-show = "TimeArea==1"
				  v-model="form.startTime"
				  value-format="HH:mm"
				  :picker-options="{
				    start: '00:00',
				    step: '00:15',
				    end: '23:50'
				  }"
				  placeholder="开始时间">
				</el-time-select>
				<span v-show = "TimeArea==1" style="margin: 0 5px;">至</span>
				<el-time-select
					v-show = "TimeArea==1"
					value-format="HH:mm"
				  v-model="form.endTime"
				  :picker-options="{
				    start: '00:00',
				    step: '00:15',
				    end: '23:50'
				  }"
				  placeholder="结束时间">
				</el-time-select>
				
				<el-checkbox-group v-model="form.name5" class="checkbox_diy" v-show="TimeArea==2">
					<el-checkbox-button class="box_checkbox" v-for="week in weeks" :label="week.name" :key="week.name">{{week.label}}</el-checkbox-button>
				</el-checkbox-group>
				
		 		<el-checkbox-group v-model="form.name5" v-show="TimeArea==3" >
				     <el-checkbox-button class="box_checkbox" v-for="month in months" 
				     	:label="month.name" :key="month.name">{{month.label}}</el-checkbox-button>
				</el-checkbox-group>
				</div>
				
		  </el-form-item>
		  
		   <el-form-item label="脱敏词脱敏" required>
		   		<div class="" style="margin-bottom: 15px;" v-for="(item,index) in form.tuomingArray">
		   			 <el-col :span="3.5">
		   		    <el-form-item  >
		   			<el-select v-model="item.outputDataFormIndex" style="width: 180px;" placeholder="选择脱敏字段">
					    <el-option
					     v-for="(item,index) in lastForm.output"
					      :key="index"
					      :label="item.name"
					      :value="index">
					    </el-option>
					</el-select>
					</el-form-item>
					 </el-col>
					 
					 <el-col :span="3.5">
					  	<el-form-item prop="position">
					<el-select v-model="item.position" style="width: 180px;"  placeholder="选择位置">
					    <el-option
					      key="1"
					      label="中间"
					      value="1">
					    </el-option>
					     <el-option
					      key="2"
					      label="后面"
					      value="2">
					    </el-option>
					     <el-option
					      key="3"
					      label="前面"
					      value="4">
					    </el-option>
					     <el-option
					      key="4"
					      label="全部"
					      value="4">
					    </el-option>
					</el-select>
					  </el-form-item>
					 </el-col>
					  
					  <el-col :span="3.5">
					   	<el-form-item prop="length">
							<el-input placeholder="输入位数" style="width: 100px;" v-model="item.length" class=""></el-input>&nbsp;位 
					   </el-form-item>
					  </el-col>
					  
					<el-col :span="3.5">
						<el-form-item prop="replaceStr">
						<el-select v-model="item.replaceStr" style="width: 180px;"  placeholder="选择脱敏规则">
						    <el-option
						      key="1"
						      label="用星号代替"
						      value="*">
						    </el-option>
						</el-select>
					 </el-form-item>
					</el-col>
					 
					<i class="el-icon-circle-plus diy_add" @click="addTuoMin" v-show="index==0"></i>
					<i class="el-icon-remove diy_del" @click="delTuoMin(index)" v-show="index!=0"></i>
		   		</div>
		   </el-form-item>
		   
		   <el-form-item label="可发布区域" required  prop="businessType1">
		   		<el-checkbox-group v-model="form.businessType1" >
				     <el-checkbox-button class="box_checkbox"
				     	:disabled="chenueForm.businessType1==''?false:true"
				     	v-for="(item,index) in fabuAreaRadio"
				     	:label="item.id" :key="index"
				     	>{{item.name}}</el-checkbox-button>
				     
				</el-checkbox-group>
				
				<div class="echats_bing_div">
					<echart-pie :className="serverQuarceClassName"  :diyOption="optionPie" :idName="serverQuarceId"></echart-pie>
					<p >CPU allocation (cross)</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p>总量&nbsp;&nbsp;1.456</p>
				</div>
				<div class="echats_bing_div">
					<echart-pie :className="serverQuarceClassName"  :diyOption="optionPie" :idName="serverQuarceId2"></echart-pie>
					<p >CPU allocation (cross)</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p>总量&nbsp;&nbsp;1.456</p>
				</div><div class="echats_bing_div">
					<echart-pie :className="serverQuarceClassName"  :diyOption="optionPie" :idName="serverQuarceId3"></echart-pie>
					<p >CPU allocation (cross)</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p><span></span>请求值&nbsp;&nbsp;1.456</p>
					<p>总量&nbsp;&nbsp;1.456</p>
				</div>
		   </el-form-item>
		   
		   <el-form-item label="服务的请求方" prop="everyAreaCheckBox">
					
						<el-popover
						  placement="right"
						  width="400"
						  v-model="everyAreaVisible"
						  trigger="click">
						 <el-checkbox-group v-model="everyArea">
						  <el-checkbox  v-for="(item,index) in everyAreaCheckBox" :value="item.id" :label="index" :key="index">{{item.name}}</el-checkbox>
							<p style="text-align: right;">							
								<el-button type="primary"  size="mini" @click="chooseEveryArea">确定</el-button>
							</p>
						 </el-checkbox-group>
						 <el-button slot="reference">
						 	 <span class="everyMonth_span" v-for="(item ,index) in form.requesterIdList" :key="index">
						 		<i class="el-icon-circle-close-outline"></i>
						 		{{everyAreaCheckBox[item].name}}
						 </span>
						 </el-button>
						</el-popover>
					
		</el-form-item>
		   
		</el-form>
        <p class="step_p"> 
        	<el-button type="primary"  style=" background-color: #2576C5;" @click="nextStep(1)" class="button_diy">上一步</el-button>
			<el-button type="primary" style=" background-color: #2576C5;" @click="submit" class="button_diy">发布</el-button>
		</p>
    </section>
</template>

<script>
    import {
    	everyMonthCheckBoxJson,
    	everyWeekCheckBoxJson,
    } from "@/views/serverResource/common/js_css_img/jsonDiy"
    import echartPie from "@/views/areaResource/components/echartPie"
    import {
    	computedOrganizationSearch
    } from "../../css_js_img/computedSmartResource"
    export default {
    	props:{
    		lastForm:Object,
    		fabuAreaRadio:Array,
    		detailType:Number,
    		chenueForm:Object
    	},
    	components:{
    		echartPie
    	},
        data() {
          return {
          		everyAreaVisible:false	,
          		everyArea:[],
          		everyAreaCheckBox:[],
          		form:{
          			startTime:'',
          			endTime:'',
          			name5:[],
          			businessType1:[],
          			requesterIdList:[],
          			requesterIdList1:[],
          			accessTactics:{
          					frequency:'',     //频率
							frequencyUnit:'',  //频率单位  1小时  2天 3月
							flow:'',   //流量
							flowUnit:'',   //流量单位    1小时  2天 3月
							timeTpye:'',  //访问时间类型   1天 2周 3月
							timeValue:''  //访问时间值
          			},
          			tuomingArray:[
          				{
          					"name":"",  //输出参数的字段名
							"outputDataFormId":"",   //输出参数中对应的outputDataFormId，这个在输入输出参数的接口查询中可以获取到每个元数据对应的这个Id,也就是输入输出接口中outputDataFormList里每个集合里的id
							"outputDataFormIndex":'',
							"outputDataFormIds":"",//当有组合字段的时候，将组合字段的对应的outputDataFormList里每个集合里的id放这里
							"fieldJoinStr":"",/*字段连接的字符，就是组合字段*/
							"position":"",  //脱敏规则中的位置
							"length":"",  //过滤的长度
							"replaceStr":"",   //替换符号
          				}
          			],
          		},
          		TimeArea:0,
          		weeks:everyWeekCheckBoxJson,
          		months:everyMonthCheckBoxJson,
          		serverQuarceId:'ww',
          		serverQuarceId2:"dwfwa",
          		serverQuarceId3:'ffwf',
          		serverQuarceClassName:'echats_bing',
          		optionPie:{         
			            legend: {                       //图例
			              show:false,                   //是否显示图例
			              orient: 'vertical',           //布局方向
			              x: 'left',                    //图例相对位置
			              data:['一班','二班'] //图例内容
			            },
			            series: [                       //内容
			              {
			                name:'班级人数占比',      //内容标题
			                type:'pie',                 //图标样式
			                
			                radius: ['30%', '40%'],         //饼图大小，[x,y]:x表示内半径，y表示外半径  
			                label: {                    //标签
			                  normal: {
			                     show: false       //标签位置：内部
			                  }
			                },
			                labelLine: {        //提示框
			                  normal: {
			                    show: false     //是否显示
			                  }
			                },
			                color:['#5ad6ff','#dbdbdb'],    //颜色
			                name:['一班','二班'],                      //内容名称
			                data:[                                              //数据
			                    {value:50,name:'一班',/*selected:true*/},     //selected:是否被选中
			                    {value:46,name:'二班'},
			                ],               
			              },
			              {
			                name:'男女占比',
			                type:'pie',
			                radius: ['40%', '50%'],
			
			                labelLine:{
			                  normal:{
			                     show: false  
			                  }
			                },
			                color:['#5a8bff','#cccccc'],  
			                data:[
			                    {value:171},
			                    {value:79},
			                ],
			 
			        }],
			           
			     },
			     rules: {
                    businessType1:[
                    	{  type: 'array', required: true, message: '请至少选择一个发布区域', trigger: 'change' },
                    ],
                   
                  
                },
          };
        },
        methods: {
        		changeTimeArea(val){/*访问时间段的改变*/
        			this.TimeArea = val;
        		},
        		chooseEveryArea(){/*服务请求方*/
        			this.form.requesterIdList = this.everyArea
        			this.everyAreaVisible=false;
        		},
        		nextStep(val){/*上一步或者下一步*/
        			this.$emit('nextStep',{val:val,form:[]});
        		},
        		submit(){/*提交前的处理*/
        			
        			this.$refs['form1'].validate((valid)=>{
        				valid = true;
        				if(this.form.requesterIdList.length==0){
        					valid = false;
        				}
        				if(this.form.accessTactics.timeTpye!=''){
        					for(let i in this.form.accessTactics){
        						if(this.form.accessTactics[i]==''&& i!='timeValue'){
        							valid = false;
        						}
        					}
        				}
        				/*验证*/
        				for (let i = 0; i < this.form.tuomingArray.length; i++) {
        					for(let k in this.form.tuomingArray[i]){
        						if(k=='outputDataFormIndex'&&this.form.tuomingArray[i][k]===''){
        								console.log(this.form.tuomingArray[i][k])
        								valid = false;
        						}
        						if(k=='position'&&this.form.tuomingArray[i][k]===''){
        							console.log(this.form.tuomingArray[i][k])
        								valid = false;
        						}
        						if(k=='length'&&this.form.tuomingArray[i][k]===''){
        							console.log(this.form.tuomingArray[i][k])
        								valid = false;
        						}
        						if(k=='replaceStr'&&this.form.tuomingArray[i][k]===''){
        							console.log(this.form.tuomingArray[i][k])
        								valid = false;
        						}
        					}
        				}
        				if(!valid){
                          	this.$message({
                                showClose: true,
                                message: '请填写完必要信息',
                                type: 'error'
                            });
                            return false;
                        }else{
                        		if(this.detailType==3){/*依赖关系*/
                        			for (let i = 0; i < this.form.tuomingArray.length; i++) {
			        					this.form.tuomingArray[i].name=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].name;
			        					this.form.tuomingArray[i].outputDataFormId=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].id;
			        				}
                        		}else if(this.detailType==4){/*组合关系*/
                        			for (let i = 0; i < this.form.tuomingArray.length; i++) {
			        					this.form.tuomingArray[i].name=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].name;
//			        					this.form.tuomingArray[i].outputDataFormId=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].id;
										if(this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].type==1){
											this.form.tuomingArray[i].outputDataFormId=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].id;
										}else if(this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].type==2){
											this.form.tuomingArray[i].outputDataFormIds=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].mentname;
										}
			        					this.form.tuomingArray[i].fieldJoinStr=this.lastForm.output[this.form.tuomingArray[i].outputDataFormIndex].fieldJoinStr;
                        			}
                        		}
                        	    
			        			for (let k = 0; k < this.form.requesterIdList.length; k++) {
			        				this.form.requesterIdList1.push(this.everyAreaCheckBox[this.form.requesterIdList[k]].id)
			        			}
			        			switch (this.form.accessTactics.timeTpye){
			        				case "1":
			        				this.form.accessTactics.timeValue = this.form.startTime +','+this.form.endTime
			        					break;
			        				case "2":
			        				this.form.accessTactics.timeValue = this.form.name5.join(',')
			        					break;
			        				case "3":
			        				this.form.accessTactics.timeValue = this.form.name5.join(',')
			        					break;
			        				default:
			        				this.form.accessTactics =null;
			        				break;
			        			}
			        			this.$emit('nextStep',{val:0,form:this.form})
                        }
        			})
        			
        			
        			

        		},
        		addTuoMin(){/*增加脱敏源*/
        			this.form.tuomingArray.push(
        				{
        					"name":"",  //输出参数的字段名
							"outputDataFormId":"",   //输出参数中对应的outputDataFormId，这个在输入输出参数的接口查询中可以获取到每个元数据对应的这个Id,也就是输入输出接口中outputDataFormList里每个集合里的id
							"outputDataFormIds":"",//当有组合字段的时候，将组合字段的对应的outputDataFormList里每个集合里的id放这里
							"fieldJoinStr":"",/*字段连接的字符，就是组合字段*/
							"position":"",  //脱敏规则中的位置
							"length":"",  //过滤的长度
							"replaceStr":"",   //替换符号
							"outputDataFormIndex":'',
        				}
        			)
        		},
        		delTuoMin(index){
        			this.form.tuomingArray.splice(index,1);
        		},
        		dealData(){
        			if(this.chenueForm.accessTactics!=null){
		        		this.form.accessTactics = this.chenueForm.accessTactics
//		        		alert(this.chenueForm.accessTactics.timeType)
						
		        		if(this.chenueForm.accessTactics.timeTpye==1){
		        			this.form.startTime = this.form.accessTactics.timeValue.split(',')[0]
		        			this.form.endTime = this.form.accessTactics.timeValue.split(',')[1]
		        		}
		        		this.form.accessTactics.flowUnit = String(this.form.accessTactics.flowUnit );
		        		this.form.accessTactics.frequencyUnit = String(this.form.accessTactics.frequencyUnit );
		        	}
		        	
		        	if(this.chenueForm.requesterIdList!=''){
		        		this.form.tuomingArray = [];
		        		console.log(this.chenueForm);
		        		for (let i = 0; i < this.chenueForm.smGroupOutputFieldViewVos.length; i++) {
		        			this.form.tuomingArray.push(
		        				{
		          					"name":"",  //输出参数的字段名
									"outputDataFormId":"",   //输出参数中对应的outputDataFormId，这个在输入输出参数的接口查询中可以获取到每个元数据对应的这个Id,也就是输入输出接口中outputDataFormList里每个集合里的id
									"outputDataFormIndex":this.chenueForm.smGroupOutputFieldViewVos[i].outputDataFormId==null?this.getOutPutIndex2(this.chenueForm.smGroupOutputFieldViewVos[i].outputDataFormIds):this.getOutPutIndex(this.chenueForm.smGroupOutputFieldViewVos[i].outputDataFormId),
									"outputDataFormIds":"",//当有组合字段的时候，将组合字段的对应的outputDataFormList里每个集合里的id放这里
									"fieldJoinStr":"",/*字段连接的字符，就是组合字段*/
									"position":String(this.chenueForm.smGroupOutputFieldViewVos[i].position),  //脱敏规则中的位置
									"length":this.chenueForm.smGroupOutputFieldViewVos[i].length,  //过滤的长度
									"replaceStr":this.chenueForm.smGroupOutputFieldViewVos[i].replaceStr,   //替换符号
		          				}
		        			)
		        		}
		        		for(let k=0;k<this.chenueForm.requesterIdList.length;k++){
		        			this.form.requesterIdList.push(this.getRequestIndex(this.chenueForm.requesterIdList[k].requesterId))
		        		}
		        		if(this.chenueForm.businessType1!=''){
		        			this.form.businessType1.push(this.chenueForm.businessType1.id);
		        		}
		        		
		        	}
        		},
        		getOutPutIndex(val){
        			console.log(this.lastForm);
        			for (let i = 0; i < this.lastForm.output.length; i++) {
        				if(this.lastForm.output[i].id==val){
        					return i
        				}
        			}
//					return val;
        		},
        		getOutPutIndex2(val){
        			console.log(this.lastForm);
        			for (let i = 0; i < this.lastForm.output.length; i++) {
        				if(this.lastForm.output[i].mentname==val){
        					return i
        				}
        			}
//					return val;
        		},
        		getRequestIndex(val){
        			console.log(this.everyAreaCheckBox);
        			for (let i = 0; i < this.everyAreaCheckBox.length; i++) {
        				if(this.everyAreaCheckBox[i].id==val){
        					return i
        				}
        			}
        			return val;
        		}
        },
        mounted(){
        	computedOrganizationSearch(this);
        	
        },
        watch:{
//      	chenueForm:{
//      		handler(newVal){
//      			if(newVal.requesterIdList!=''){
//      				this.dealData();
//      			}
//      		},
//      		deep:true
//      	}
        }
  };
</script>

<style >
	section.service_chore_service_chenue p.step_p {
	    position: absolute;
	    bottom: 10px;
	    right: 10px;
	    background: #bbe5f954;
	    width: 100%;
	    text-align: right;
	    padding: 10px 40px;
	}
	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(1){
		    font-size: 18px;
    		text-align: center;
	}
	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(2) {
	    font-size: 14px;
	    text-align: center;
	    color: #5ad6ff;
	}
	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(2) span{
			    display: inline-block;
	    width: 15px;
	    height: 15px;
	    background: #5ad6ff;
	    border-radius: 50%;
	    vertical-align: middle;
	    margin-right: 5px;
	}

	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(3){
		  font-size: 14px;
	    text-align: center;
	    color: #5a8bff;
	}
	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(3) span{
				    display: inline-block;
	    width: 15px;
	    height: 15px;
	    background: #5a8bff;
	    border-radius: 50%;
	    vertical-align: middle;
	    margin-right: 5px;
	}
	section.service_chore_service_chenue .echats_bing_div p:nth-of-type(4){
		font-size: 14px;
	    text-align: center;
	    color: #5a8bff;
	}
	section.service_chore_service_chenue .echats_bing_div{
		display: inline-block;
		width: 300px;
	}
	section.service_chore_service_chenue .diy_add{
		font-size: 22px;
	    vertical-align: middle;
	    color: #2576C5;
	    cursor: pointer;
	}
	section.service_chore_service_chenue .diy_del{
		font-size: 22px;
	    vertical-align: middle;
	    color: #e30808d1;
	    cursor: pointer;
	}
    section.service_chore_service_chenue{
    		margin-top: 10px;
			background: #fff;
			box-sizing: border-box;
			height: calc(100% - 87px);
			padding: 15px;
			overflow-y: scroll;
			padding-bottom: 40px;
    }
section.service_chore_service_chenue .radio_diy .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #fff;
    color: #2576C5;
    border-color: #2576C5;
}
 section.service_chore_service_chenue .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background: #2576C5;
    border-color: #2576C5;
}
 section.service_chore_service_chenue .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
    border-left-color: #2576C5;
}
     section.service_chore_service_chenue  .box_checkbox{
    	margin: 5px !important;
    }
     section.service_chore_service_chenue  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
</style>